<template>
  <div class="web-case-main">
    <Sticky :class-name="'sub-navbar'">
      <div class="web-title">产品列表</div>
    </Sticky>
    <div class="app-container">
      <div class="filter-container">
        <el-input
          v-model="listQuery.title"
          placeholder="商品名称"
          class="filter-item"
          style="width: 200px"
          clearable
        />
        <el-date-picker
          v-model="startTime"
          class="filter-item"
          style="width: 200px"
          type="date"
          placeholder="开始日期"
          format="yyyy 年 MM 月 dd 日"
          value-format="timestamp"
          @change="getQueryStartTime"
        />
        <el-date-picker
          v-model="endTime"
          class="filter-item"
          style="width: 200px"
          type="date"
          placeholder="结束时间"
          format="yyyy 年 MM 月 dd 日"
          value-format="timestamp"
          @change="getQueryEndTime"
        />
        <el-button
          v-waves
          class="filter-item"
          type="primary"
          icon="el-icon-search"
          @click="handleFilter"
        >查询</el-button>
        <el-button
          v-waves
          class="filter-item"
          type="primary"
          icon="el-icon-edit"
          @click="handleCreate"
        >新增</el-button>
      </div>
      <el-table
        :key="tableKey"
        :data="list"
        border
        fit
        highlight-current-row
      >
        <el-table-column
          label="ID"
          prop="id"
          align="center"
          width="80"
        />
        <el-table-column
          label="名称"
          align="center"
          width="200"
        >
          <template slot-scope="{ row }">
            <span v-html="row.showTitle" />
          </template>
        </el-table-column>
        <el-table-column
          label="简介"
          prop="thumb"
          align="center"
          width="400"
        />
        <el-table-column
          label="更新时间"
          prop="update_time"
          align="center"
          width="100"
        />
        <el-table-column
          label="创建时间"
          prop="create_time"
          align="center"
          width="100"
        />
        <el-table-column
          label="排序"
          align="center"
          width="150"
        >
          <template slot-scope="{ row }">
            <el-input v-model="row.sort" placeholder="请输入排序" @change="changeSort(row.id,row.sort)" />
          </template>
        </el-table-column>
        <el-table-column
          label="是否显示"
          align="center"
          width="150"
        >
          <template slot-scope="{ row }">
            <el-button v-if="row.status===1" type="success" size="mini" @click="changeShow(row)">显示</el-button>
            <el-button v-else type="danger" size="mini" @click="changeShow(row)">禁止</el-button>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
        >
          <template slot-scope="{ row }">
            <el-button type="primary" icon="el-icon-edit" size="mini" plain @click="editAbout(row.id)">修改</el-button>
            <el-button v-waves type="danger" size="mini" icon="el-icon-delete" plain @click="removeConfirm(row)"> 删除 </el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        :total="pageInfo.total*pageInfo.pageSize"
        :page.sync="pageInfo.page"
        :limit.sync="pageInfo.pageSize"
        @pagination="getList()"
      />
    </div>
  </div>
</template>

<script>
import Sticky from '../../components/Sticky/index'
import waves from '../../directive/waves/waves'
import Pagination from '../../components/Pagination/index'
import { getListPage, changeFiled, remove } from '../../api/web-case'
import { removeSingleImage } from '@/api/upload-image'
export default {
  components: { Sticky, Pagination },
  directives: { waves },
  data() {
    return {
      tableKey: 0,
      list: [],
      listQuery: {},
      endTime: '',
      startTime: '',
      pageInfo: {
        page: 1,
        pageSize: 2,
        total: 0
      }
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    getList() {
      if (this.endTime !== '' && this.startTime > this.endTime) {
        this.$message({
          type: 'error',
          message: '结束日期必须大于结束日期'
        })
        return
      }
      const postDate = {
        'pageInfo': this.pageInfo,
        'listQuery': this.listQuery
      }
      getListPage(postDate).then((response) => {
        const { list, pageInfo } = response.data
        // this.$message({
        //   message: '查询成功',
        //   type: 'success'
        // })
        this.list = list
        this.pageInfo = { ...pageInfo }
        list.forEach(item => {
          item.showTitle = this.wrapperKeyword('title', item.title)
        })
      })
    },
    // 搜索文字高亮
    wrapperKeyword(k, v) {
      function hightight(value) {
        return `<span style="color: #1890ff">${value}</span>`
      }
      if (!this.listQuery[k]) {
        return v
      } else {
        return v.replace(new RegExp(this.listQuery[k], 'ig'), v => hightight(v))
      }
    },
    handleFilter() {
      // 带条件每次查询从第一页开始
      this.pageInfo.page = 1
      this.getList()
    },
    getQueryStartTime() {
      const startTime = this.startTime
      this.listQuery = {
        ...this.listQuery,
        startTime
      }
    },
    getQueryEndTime() {
      const endTime = this.endTime
      this.listQuery = {
        ...this.listQuery,
        endTime
      }
    },
    handleCreate() {
      this.$router.push('/web-case/add')
    },
    changeSort(id, num) {
      const postData = {
        'id': id,
        'postForm': {
          'sort': num
        }
      }
      changeFiled(postData).then((response) => {
        this.$message({
          message: '排序更改成功',
          type: 'success'
        })
      })
    },
    changeShow(item) {
      item.status = 1 - item.status
      const postData = {
        'id': item.id,
        'postForm': {
          'status': item.status
        }
      }
      changeFiled(postData).then((response) => {
        this.$message({
          message: '状态更改成功',
          type: 'success'
        })
      })
    },
    editAbout(id) {
      this.$router.push('/web-case/edit/' + id)
    },
    removeConfirm(item) {
      this.$confirm('此操作将永久的删除该调信息，是否继续', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.removeAbout(item)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    removeAbout(item) {
      const postData = {
        'id': item.id
      }
      remove(postData).then((response) => {
        this.$message({
          message: '删除成功',
          type: 'success'
        })
        const postDataUrl = {
          'file': item.brief
        }
        removeSingleImage(postDataUrl).then(responses => {
          console.log(responses)
        })
        this.getList()
      })
    }
  }
}
</script>

<style scoped lang="scss">
  .web-case-main{
    .filter-container{
      .filter-item{
        margin-right: 15px;
      }
    }
  }
</style>
